
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/> 	
	<meta name="viewport" content="width=310,height=632,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="./css/gmu.css"/>
	<link rel="stylesheet" type="text/css" href="./css/group.css"/>
	<style type="text/css">
	.ui-slider-pre,.ui-slider-next{
		background:url('./img/artr.png') no-repeat 0 50%;
	}
	.ui-slider-pre{left:10px;}
	.ui-slider-next{
		right:10px;
		background-position:100% 50%;
	}	
	.videoList{
		width:100%;
		text-align:center;
		overflow:hidden;

	}
	.videoList div{
		width:310px;margin:0 auto;
	}
	#slider{height:445px;}
	.chanel{width:310px;}
	</style>
	<script type="text/javascript" src='js/zepto.min.js'></script>
	<script type="text/javascript" src="js/gmu.js"></script>
	<title>N5 culture chanel</title>



</head>

<body>


	<section class='chanel' >
		<section id="slider">
			<div>
				<a href="javascript:void(0)"><img lazyload="img/chanel.gif"></a>
			</div>
			<div>
				<a href="javascript:void(0)"><img lazyload="img/chanel.gif"></a>
			</div>
			<div>
				<a href="javascript:void(0)"><img lazyload="img/chanel.gif"></a>
			</div>
		</section>
	
		<section class='videoList'>
			<ul>
				<li><a href='#'><img class='play' src='img/playBg.png' /><img src='img/videoImg.jpg' /></a></li>
				<li><a href='#'><img class='play' src='img/playBg.png' /><img src='img/videoImg.jpg' /></a></li>
				<li><a href='#'><img class='play' src='img/playBg.png' /><img src='img/videoImg.jpg' /></a></li>
				<li><a href='#'><img class='play' src='img/playBg.png' /><img src='img/videoImg.jpg' /></a></li>
				<li><a href='#'><img class='play' src='img/playBg.png' /><img src='img/videoImg.jpg' /></a></li>
				<li><a href='#'><img class='play' src='img/playBg.png' /><img src='img/videoImg.jpg' /></a></li>
			</ul>
		</section>	
	</section>	

<script>
    //创建slider组件
   $('#slider').slider({'showArr':true,'showDot': false});
</script>
</body>
</html>

